<template>
  <section class="income">
    <!--列表-->
		<el-table :data="applicationList" highlight-current-row class="el-table-style">
			<el-table-column type="selection" width="55"/>
			<el-table-column type="index" width="60"/>
			<el-table-column prop="application_people" label="申请人" width="120"/>
			<el-table-column prop="phone" label="电话" width="120"/>
			<el-table-column prop="matter" label="申请事项" width="120"/>
			<el-table-column prop="money" label="申请金额" width="180"/>
      <el-table-column prop="review_status" label="申请状态" width="180"/>
			<el-table-column label="操作" width="400">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="examine(scope.row.id,'review_first')" v-if="scope.row.review_first == 0">一级审核</el-button>
          <el-button type="info" size="mini" disabled v-else>一级审核</el-button>
          <el-button type="primary" size="mini" @click="examine(scope.row.id, 'review_secondary')" v-if="scope.row.review_secondary == 0">二级审核</el-button>
          <el-button type="info" size="mini" disabled v-else>二级审核</el-button>
          <el-button type="danger" size="mini" @click="examine(scope.row.id,'refuse')" v-if="scope.row.review_first == 0 || scope.row.review_secondary == 0">拒绝</el-button>
          <el-button type="info" size="mini" disabled v-else>拒绝</el-button>
          <el-button size="mini" @click="showDetail(scope.row.id)">查看详情</el-button>
        </template>
			</el-table-column>
		</el-table>
		<el-col :span="24" class="footer-bar">
			<div class="page-code">
        <el-pagination 
					background 
					layout="prev, pager, next" 
					:total="pageTotal"
					:page-size="limit"
					@current-change="getFeeApplicationList"
				>
				</el-pagination>
      </div>
    </el-col>

    <!-- 弹出的编辑窗口 -->
    <el-dialog
      :visible.sync="dialogVisible"
      width="60%"
      height="50%"
      center
      class="editor-dialog"
      >
      <el-form :label-position="'left'" label-width="80px" @close="initData">
        <!-- <el-form-item label="序号">
          <div>{{member.id}}</div>
        </el-form-item> -->
        <el-form-item label="申请人">
          <div >{{member.application_people}}</div>
        </el-form-item>
        <el-form-item label="电话">
          <div>{{member.phone}}</div>
        </el-form-item>
        <el-form-item label="申请事项">
          <div>{{member.matter}}</div>
        </el-form-item>
        <el-form-item label="申请金额">
          <div>{{member.money}}</div>
        </el-form-item>
        <el-form-item label="申请状态">
          <div>{{member.review_status}}</div>
        </el-form-item>
        <el-form-item label="申请说明">
          <div>{{member.info}}</div>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 图片预览 -->
		<el-dialog :visible.sync="prevImgVisible" size="tiny" center width="500px">
			<div style="display:flex;justify-content:center">
				<img style="max-width:100%" :src="dialogImageUrl" alt="">
			</div>
		</el-dialog>
		<!-- 图片预览 end -->
  </section>
</template>

<script>
export default {
	data(){
		return {
      prevImgVisible:false,//图片预览的显示
			dialogImageUrl:'',//预览的图片地址
			applicationList:[],
      pageTotal:0,
			limit:16,
      dialogVisible:false,
      member:''//弹窗的信息
		}
  },
  mounted(){
    this.getFeeApplicationList();
  },
  methods: {
    prevImg(url){
			this.dialogImageUrl=url;
			this.prevImgVisible=true;
		},
    async showDetail(id){
      //查看详情
      this.dialogVisible = true;
      const res=await this.$api.feeApplicationDetail({
        id
      })
      if(res.data.level=='success'){
        this.member=res.data.data
      }else{
        this.$message({
          type:'error',
          message:res.data.message
        })
      }
    },
    examine(id,type){
      //审核
      const judge= this.$confirm('确定需要审核通过?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
				}).then(async() => {
          var params = {
                id: id,
                review_type: type,
              }
					const res=await this.$api.feeApplicationReview(params);
					if(res.data.level=='success'){
						this.getFeeApplicationList();
						this.$message({
							type: 'success',
							message: res.data.message
						});
					}else{
						this.$message({
							type: 'error',
							message: res.data.message
						});
					}
					
				}).catch(() => {
          
			});
    },
    //获取费用列表
    async getFeeApplicationList(page){
      let params = {
        limit:this.limit,
        page:page || 1,
      }
      const res = await this.$api.getFeeApplicationList(params);
      if(res.data.level=='success'){
        let list = res.data.data;      
				this.applicationList = list;
				this.pageTotal = res.data.page_info.total
      }else{
        this.$message({
          message: res.data.message,
          type: 'warning'
        });
      }
    },
    initData(){
      this.member=''
    }
  },
}
</script>
<style lang='scss' scoped>
  .footer-bar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f2f2f2;
    padding: 8px;
    margin: 10px 0px;
    box-sizing: border-box;
  }
</style>

<style>
	.el-pagination.is-background .el-pager li,
	.el-pagination.is-background .btn-prev,
	.el-pagination.is-background .btn-next
	{
		background-color: #fff;
		border: 1px solid #f1f1f1;
		margin: 0;
	}

 .income .el-dialog__body{overflow: auto;}
</style>
